import {
	getOfficeUse, tabList
} from '@/static/js/model'
export default {
	data() {
		return {
			list: [],//模板列表
			leftList: [],//左边列表
			rightList: [],//右边列表
			page: 1,//页码
			noMore: 'noMore',//是否加载更多
			firstList: [],//一级菜单
			secondList: [],//二级菜单
			firstActive: 0,//一级菜单选中
			secondActive: 0,//二级菜单选中
			firstActiveId: 0,//一级菜单选中id
			secondActiveId: 0,//二级菜单选中id
			firstActiveStyle: {
				color: '##333333',
				fontWeight: 'bold',
				fontSize: '36rpx',
				transform: 'scale(1.05)'
			},//一级菜单选中样式
			firstInactiveStyle: {
				color: '#606266',
				transform: 'scale(1)'
			},//一级菜单未选中样式
			secondActiveStyle: {
				padding: '0 20rpx',
				fontSize: '28rpx',
				color: '#1C87F3',
				background: '#DDEEFF',
				borderRadius: '100rpx',
				lineHeight: '58rpx',
				textAlign: 'center',
			},//二级菜单选中样式
			secondInactiveStyle: {
				textAlign: 'center',
				lineHeight: '58rpx',
				background: '#F1F8FF',
				borderRadius: '100rpx',
				padding: '0 20rpx',
				fontSize: '28rpx',
			},//二级菜单未选中样式
		};
	},
	onLoad(e) {
		//获取菜单列表
		this.getTabList();
	},
	methods: {
		//获取模板列表
		getOfficeUseList() {
			getOfficeUse({
				tid: this.firstActiveId,
				page: this.page,
				pagesize: 16,
				s_tid: this.secondActiveId,
			}).then(res => {
				if (res.code == 1) {
					let list = res.data.list;
					if (list.length == 0 || list.length < 16) {
						this.noMore = 'noMore'
					} else {
						this.noMore = 'loadMore'
					}

					this.getList(list, 'leftList')

				}
			})
		},

		//列表分布
		getList(list, listName) {
			if (list.length == 0) return
			list[0].images = list[0].images.split('|');
			this[listName].push(list[0])
			list.shift()
			setTimeout(() => {
				this.getList(list, listName == 'leftList' ? 'rightList' : 'leftList')
			}, 70)
		},

		//跳转详情
		goDetails(e) {
			uni.showLoading({
				title: '加载中...'
			});
			let aspectRatio = ''
			uni.getImageInfo({
				src: e.images[0],
				success: function (res) {
					uni.hideLoading();
					aspectRatio = (res.height / res.width);
					uni.navigateTo({
						url: `/pages/model/modelInfo/index?id=${e.id}&ratio=${aspectRatio}`
					})
				},
				fail: function (error) {
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						duration: 2000
					});
				}
			});

		},

		//上拉加载
		scrolltolower() {
			if (this.noMore == 'noMore') return
			this.page++;
			this.getOfficeUseList();
		},

		//菜单列表
		getTabList() {
			tabList().then(res => {
				if (res.code == 1) {
					let data = res.data
					for (let key in data) {
						this.firstList.push({
							id: data[key].id,
							name: data[key].name,
							sonList: data[key].sencond
						})
					}
					this.secondList = this.firstList[0].sonList
					this.firstActiveId = this.firstList[0].id
					this.secondActiveId = this.secondList[0].id
					//获取模板列表
					this.getOfficeUseList();
				}
			})
		},

		//一级菜单点击
		firstTabClick(e) {
			this.secondActive = 0
			this.firstActive = e.index
			this.secondList = this.firstList[e.index].sonList
			this.firstActiveId = this.firstList[e.index].id
			this.secondActiveId = this.secondList[0].id
			this.clearData()
			// this.getOfficeUseList()
		},

		//二级菜单点击
		secondTabClick(e) {
			this.clearData()
			this.secondActive = e.index
			this.secondActiveId = this.secondList[e.index].id
			this.getOfficeUseList()
		},

		//清空数据
		clearData() {
			this.leftList = []
			this.rightList = []
			this.list = []
			this.page = 1
		},

		//swiper切换
		onSwiperChange(e) {
			let index = e.detail.current
			this.firstActive = index
			this.secondActive = 0
			this.secondList = this.firstList[index].sonList
			this.firstActiveId = this.firstList[index].id
			this.secondActiveId = this.secondList[0].id
			this.clearData()
			this.getOfficeUseList()
		},
	},

}